<template>
  <dv-border-box1 style="background-size: cover;" :color="['#ffeca8', 'gold']" :class="isFullScreen?'fullscreen-div':''"
                  class="back" ref="borderRef">
    <div
        style="width: 100%;height: 100%;display: flex;flex-direction: column;">
      <div class="back" style="width: 100%;height: 100%;z-index: -100;background-repeat: no-repeat; background-position: center;
        background-size: cover; position: absolute;">

      </div>
      <img style="width: 180px;position: absolute;left: 40px;top:16px"
           src="http://www.ynpetgc.cn/static/img/logo-top.797dcaac.png">
      <img @click="playLive" style="width: 72px;position: absolute;right: 40px;top:8px;border-radius: 50%"
           src="../../../assets/images/大理大学logo.jpg">

      <div style="display: flex;justify-content: center">
                    <span style="color: gold;position: absolute;font-size: 30px;font-weight: 700;left: 32px;top: 16px">{{
                        timeStr
                      }}</span>

        <div style="display: flex;flex-direction: column;align-items: center;padding-top: 16px">
                        <span style="color: gold;position: absolute;font-size: 30px;font-weight: 700">
                            {{ userStore.race.name }}
                        </span>
          <dv-decoration-5 :color="['#ff793e', '#ff793e']" style="width:1400px;height:80px;"/>
        </div>
      </div>
      <div v-if="currentPage==0" style="flex: 1;display: flex;flex-direction: column">
        <div style="flex: 1;display: flex;flex-direction: row;">
          <div style="flex: 1;display: flex;flex-direction: column;padding: 8px 16px">
            <div style="display: flex;flex-direction: column;flex-grow: 1;align-items: center;height: 0px">
              <div
                  style="color: #fdf2bd;font-weight: bolder;font-size: 20px;align-self: start">
                <span style="margin-bottom: 16px">赛点风采</span>
              </div>
              <el-image
                  style="width: 100%;height: 0px;object-fit: cover;flex: 1;display: block"
                  src="src/assets/images/大理大学.jpeg"/>
            </div>
            <div style="flex: 1;display: flex;flex-direction: row">
              <div style="display: flex;flex-direction: column;flex: 1;align-items: center">
                <div
                    style="color: #fdf2bd;font-weight: bolder;font-size: 20px;align-self: start">
                  <span style="margin-bottom: 16px">性别分布</span>
                </div>
                <dv-capsule-chart :config="sexConfig"
                                  style="width:100%;height:200px;padding: 60px 20px"/>
              </div>
              <div style="display: flex;flex-direction: column;flex: 1;align-items: center">
                <div
                    style="color: #fdf2bd;font-weight: bolder;font-size: 20px;align-self: start">
                  <span style="margin-bottom: 16px">年龄分布</span>
                </div>
                <dv-active-ring-chart :config="ageConfig" style="width:200px;height:200px"/>
              </div>
            </div>

            <div style="display: flex;flex-direction: column;flex: 2;align-items: center">
              <div

                  style="color: #fdf2bd;font-weight: bolder;font-size: 20px;align-self: start">
                <span style="margin-bottom: 16px">学校排行榜</span>
              </div>
              <div style="height: 160px;position: relative;width: 100%">
                <div style="position: absolute;left: 0px;right: 0px;width: 120px;height: 120px;margin: 0 auto">
                  <svg style="position: absolute;left: 0px;right: 0px;margin: 0 auto;" width="40" id="crown1"
                       fill="gold"
                       data-name="Layer 1" xmlns="http://www.w3.org/2000/svg"
                       viewBox="0 0 100 50">
                    <polygon class="cls-1" points="12.7 50 87.5 50 100 0 75 25 50 0 25.6 25 0 0 12.7 50"></polygon>
                  </svg>

                  <img
                      style="width: 80%;height: 80%;position: absolute;left: 0px;right: 0px;margin: 0 auto;margin-top: 24px;border-radius: 50%"
                      src="../../../assets/images/大理大学logo.jpg">
                  <span
                      style="position: absolute;left: 0px;right: 0px;margin: 0 auto;bottom: -28px;color: #fdf2bd;font-size: 18px">大学1</span>
                </div>

                <div
                    style="position: absolute;left: -170px;right:  0px;width: 110px;height: 110px;margin: 0 auto;margin-top: 24px">
                  <svg style="position: absolute;left: 0px;right: 0px;margin: 0 auto;" width="40" id="crown1"
                       fill="#EEEEEEFF" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg"
                       viewBox="0 0 100 50">
                    <polygon class="cls-1" points="12.7 50 87.5 50 100 0 75 25 50 0 25.6 25 0 0 12.7 50"></polygon>
                  </svg>
                  <img
                      style="width: 80%;height: 80%;position: absolute;left: 0px;right: 0px;margin: 0 auto;margin-top: 24px;border-radius: 50%"
                      src="../../../assets/images/大理大学logo.jpg">
                  <span
                      style="position: absolute;left: 0px;right: 0px;margin: 0 auto;bottom: -28px;color: #fdf2bd;font-size: 18px">大学1</span>
                </div>

                <div
                    style="position: absolute;left: 0px;right:  -170px;width: 110px;height: 110px;margin: 0 auto;margin-top: 24px">
                  <svg style="position: absolute;left: 0px;right: 0px;margin: 0 auto;" width="40" id="crown1"
                       fill="#D5926DFF" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg"
                       viewBox="0 0 100 50">
                    <polygon class="cls-1" points="12.7 50 87.5 50 100 0 75 25 50 0 25.6 25 0 0 12.7 50"></polygon>
                  </svg>
                  <img
                      style="width: 80%;height: 80%;position: absolute;left: 0px;right: 0px;margin: 0 auto;margin-top: 24px;border-radius: 50%"
                      src="../../../assets/images/大理大学logo.jpg">
                  <span
                      style="position: absolute;left: 0px;right: 0px;margin: 0 auto;bottom: -28px;color: #fdf2bd;font-size: 18px">大学1</span>
                </div>

              </div>
              <div style="flex: 1;width: 100%;">
                <dv-scroll-ranking-board :config="paihangConfig" style="height: 300px"/>
              </div>
            </div>
          </div>

          <div style="flex: 1.5;display: flex;flex-direction: column;">
            <div style="height: 120px;color: #fdf2bd;font-weight: bolder;font-size: 20px;padding: 0px 16px">
              <div style="display:flex;height: 100%;display: flex;justify-content: space-evenly">
              <span
                  style="font-size: 78px; font-family: Pc_Baidunumber;text-shadow: 0 0 .06rem rgba(0, 0, 0, .2);line-height: 120px">17°C</span>
                <div style="display:flex;flex-direction: column;justify-content: center;margin-left: 16px">
                  <span style="font-size: 28px">多云 西北风1级</span>
                  <span style="font-size: 28px;text-align: left;margin-top: 16px;display: flex">
                  15~25°C
                  <div class="color-span_65nFn false cu-color-white"
                       style="background-color: #37D43C;border-radius: 8px;margin-left: 16px"><span class="text_3FH2R"><!--s-slot-->22 优
                    <!--/s-slot--></span></div>
                </span>
                </div>
              </div>
            </div>

            <div
                style="flex: 1;display: flex;align-items: center;justify-content: center;position: relative;flex-direction: column">

              <div
                  style="height: 520px;width: 520px;position: relative;display: flex;align-items: center;justify-content: center">
                <dv-flyline-chart-enhanced :config="flylineConfig"
                                           style="width:66%;height:66%;z-index: 4;position: absolute;left: 17%;top: 17%"/>
                <img class="rotate" style="position:absolute;width: 90%;height: 90%;left: 4%;top: 4%"
                     src="../../../assets/images/lbx.png">
                <img class="rotate2" style="position:absolute;width: 93%;height: 93%;left: 2%;top: 2%"
                     src="../../../assets/images/jt.png">
                <img style="position:absolute;width: 70%;height: 70%;"
                     src="../../../assets/images/云南省.png">
                <div
                    style="height: 100px;width: 100%;bottom: 0px;position: absolute;display: flex;align-items: center;justify-content: space-evenly">
                  <div
                      style="z-index: 66;display: flex;flex-direction: column;align-items: center;justify-content: center;flex: 1">
                    <span style="font-size: 32px;font-weight: bolder;color: #fdf2bd;letter-spacing: 6px">学校总数</span>
                    <span style="font-size: 48px;font-weight: bolder;color: gold;letter-spacing: 12px">
                  {{ 20 }}个</span>
                  </div>
                  <div
                      style="z-index: 66;display: flex;flex-direction: column;align-items: center;justify-content: center;flex: 1">
                    <span
                        style="font-size: 32px;font-weight: bolder;color: #fdf2bd;letter-spacing: 6px">运动员总数</span>
                    <span style="font-size: 48px;font-weight: bolder;color: gold;letter-spacing: 12px">
                  {{ qualityTotalCount }}人</span>
                  </div>
                </div>

              </div>

            </div>

            <div style="height: 320px;display: flex;flex-direction: column">
              <div
                  style="color: #fdf2bd;font-weight: bolder;font-size: 20px;padding: 0px 16px;margin-bottom: 16px;align-self: start">
                <span style="margin-bottom: 16px">当前项目成绩</span>
              </div>
              <div id="dataExcel" style="flex: 1;display: flex;align-items: center;width: 100%;">

              </div>
            </div>
          </div>
          <div style="flex: 1;display: flex;flex-direction: column;">
            <div style="display: flex;flex-direction: column;flex-grow: 1;align-items: center">
              <div
                  style="color: #fdf2bd;font-weight: bolder;font-size: 20px;align-self: start">
                <span style="margin-bottom: 16px">当前项目</span>
              </div>
              <div style="flex-grow: 1;height: 0px;overflow-y: scroll;width: 100%;padding: 16px">
                <a-steps
                    style="color:#FFFFFF;width: 100%"
                    direction="vertical"
                    size="small"
                    :current="3"
                    :items="subList"
                ></a-steps>
              </div>

            </div>
            <div style="display: flex;flex-direction: column;flex-grow: 1;align-items: center;color: white;font-weight: bolder;font-size: 22px">
              <div
                  style="color: #fdf2bd;font-weight: bolder;font-size: 20px;align-self: start">
                <span style="margin-bottom: 16px">比赛进度</span>
              </div>
              <div
                  style="display: flex;align-items: center;color: white;font-weight: bolder;font-size: 22px;justify-content: space-between">
                <dv-percent-pond :config="completeConfig" style="width:200px;height:100px;"/>
                <div
                    style="width:220px;padding: 16px;display: flex;align-items: center;display: flex;flex-direction: column;">
                  <dv-decoration-9 style="height:140px;width: 140px" :color="['#ff793e', '#ffab3e']"
                  >
                    {{ tyCompletionRate }}
                  </dv-decoration-9>
                </div>
              </div>
              <div style=""> {{ tyCompletionCount + "人/" + qualityTotalCount + "人" }}</div>

            </div>
            <div style="display: flex;flex-direction: column;flex-grow: 2;align-items: center">
              <div
                  style="color: #fdf2bd;font-weight: bolder;font-size: 20px;align-self: start">
                <span style="margin-bottom: 16px">实时数据</span>
              </div>


              <dv-scroll-board :config="listConfig" style="flex: 1;padding: 16px;box-sizing: border-box"/>

            </div>

          </div>
        </div>
      </div>

      <div v-show="currentPage==1" style="flex: 1;display: flex;flex-direction: column">
        <div id="test" style="flex: 1;padding: 16px;">
          <HIKVideo style="width:100%;height:100%" ref="hVP"></HIKVideo>
        </div>

      </div>
      <dv-decoration-7 :color="['#ffeca8', 'gold']" style="width:auto;height:30px;align-self: center;"><span
          style="color: gold;margin: 0px 16px">昆明云体科技有限公司技术支持</span></dv-decoration-7>
    </div>

  </dv-border-box1>

</template>

<script>
import * as echarts from "echarts";
import useUserStore from '@/store/modules/user'
import HIKVideo from '@/components/HIKVideo'

export default {
  name: "index",
  components: {
    HIKVideo
  },
  data() {
    const userStore = useUserStore()
    return {
      userStore,
      currentPage: 0,
      subList: [
        {title: '民族健身操', description: "10月10日10:30-12:00"},
        {title: '队列队形', description: "10月10日14:00-16:00"},
        {title: '武术', description: "10月10日16:00-18:00"},
        {title: '教学设计', description: "10月10日19:30-21:00"},
        {title: '片段教学', description: "10月10日08:30-12:00"},
        {title: '球类', description: "10月10日14:00-16:00"},
        {title: '体操', description: "10月10日16:00-18:00"},
        {title: '专业教育理论知识', description: "10月10日19:30-21:30"},
        {title: '1分钟跳绳', description: "10月10日08:30-09:30"},
        {title: '田径', description: "10月10日09:30-12:00"},
      ],
      kklc: '测试',
      sexConfig: {
        data: [
          {
            name: '男',
            value: 1000
          },
          {
            name: '女',
            value: 800
          },
        ]
      },
      ageConfig: {},
      flylineConfig: {
        text: {
          color: 'orange',
          show: true,
          fontSize: 16
        },
        points: [
          {
            name: '临沧',
            coordinate: [0.24, 0.66]
          },
          {
            name: '保山',
            coordinate: [0.18, 0.50],
          },
          {
            name: '怒江',
            coordinate: [0.15, 0.28],
          },
          {
            name: '迪庆',
            coordinate: [0.24, 0.15],
          },
          {
            name: '大理',
            coordinate: [0.30, 0.40],
            halo: {
              show: true,
            },
            fontSize: 16
          },
          {
            name: '普洱',
            coordinate: [0.35, 0.73],
          },
          {
            name: '景洪',
            coordinate: [0.37, 0.86],
          },
          {
            name: '玉溪',
            coordinate: [0.50, 0.60],
          },
          {
            name: '红河',
            coordinate: [0.63, 0.70],
          },
          {
            name: '文山',
            coordinate: [0.84, 0.65],
          },
          {
            name: '曲靖',
            coordinate: [0.74, 0.45],
          },
          {
            name: '昭通',
            coordinate: [0.74, 0.16],
          },
          {
            name: '丽江',
            coordinate: [0.37, 0.25],
          },
          {
            name: '楚雄',
            coordinate: [0.47, 0.45],
          },
          {
            name: '德宏',
            coordinate: [0.08, 0.55],
          },
          {
            name: '昆明',
            coordinate: [0.62, 0.50],

          },
        ],
        lines: [
          {
            source: '临沧',
            target: '大理',
            width: 2,
            color: 'red'
          },
          {
            source: '德宏',
            target: '大理',
            width: 2,
            color: 'red'
          },
          {
            source: '保山',
            target: '大理',
            width: 2,
            color: 'red'
          },
          {
            source: '怒江',
            target: '大理',
            width: 2,
            color: 'red'
          },
          {
            source: '昆明',
            target: '大理',
            width: 2,
            color: 'red'
          },
          {
            source: '丽江',
            target: '大理',
            width: 2,
            color: 'red'
          },
          {
            source: '楚雄',
            target: '大理',
            width: 2,
            color: 'red'
          },
          {
            source: '玉溪',
            target: '大理',
            width: 2,
            color: 'red'
          },
          {
            source: '普洱',
            target: '大理',
            width: 2,
            color: 'red'
          },
          {
            source: '景洪',
            target: '大理',
            width: 2,
            color: 'red'
          },
          {
            source: '红河',
            target: '大理',
            width: 2,
            color: 'red'
          },
          {
            source: '文山',
            target: '大理',
            width: 2,
            color: 'red'
          },
          {
            source: '曲靖',
            target: '大理',
            width: 2,
            color: 'red'
          },
          {
            source: '昭通',
            target: '大理',
            width: 2,
            color: 'red'
          },
          {
            source: '迪庆',
            target: '大理',
            width: 2,
            color: 'red'
          },
        ],
      },
      tyCompletionRate: '80%',
      tyCompletionCount: 72,
      qualityTotalCount: 120,
      completeConfig: {
        value: 80,
        colors: ['#ff793e', '#ffab3e']
      },
      listConfig: {
        headerBGC: "rgb(227 33 39 / 72%)",
        oddRowBGC: 'rgb(227 33 39 / 72%)',
        evenRowBGC: 'transparent',
        header: ['姓名', '项目', "次数", '成绩', "时间"],
        rowNum: 10,
        data: []
      },
      paihangConfig: {
        data: [
          {
            name: '大学1',
            value: 100
          },
          {
            name: '大学1',
            value: 98
          },
          {
            name: '大学1',
            value: 55
          },
          {
            name: '大学1',
            value: 55
          },
          {
            name: '大学1',
            value: 55
          },
          {
            name: '大学1',
            value: 55
          },
          {
            name: '大学1',
            value: 55
          },
          {
            name: '大学1',
            value: 55
          },
        ]
      },
      groupCompeleteDataExcel: null,
      dataExcel: null,
      tyMaxConfig: null,
      qqMaxConfig: null,
      bmMaxConfig: null,
      isFullScreen: false,
      channelList: [],

      isInitData: false,
      isInitHk: false,
    }
  },
  async mounted() {
    setInterval(() => {
      this.currentPage=0;
      console.log(this.currentPage)
      if (this.currentPage > 1) {
        this.currentPage = 0;
      }
      if (this.currentPage == 0) {
        if (!this.isInitData) {
          this.initData();
        }
        this.$refs.hVP.hidden();
      } else {
        this.$refs.hVP.show();
      }
    }, 5000)
    this.fullScreen();
    await this.$refs.hVP.InitPlugin(2);
    let login = await this.$refs.hVP.login("192.168.0.252", 80, "admin", "ytkj18288218215");
    console.log("login:" + login);
    this.getChanel();


  },
  methods: {
    initData() {
      this.listConfig.data = [
        ['罗建国', '100米', '1', '12.65', '09:01:23'],
        ['罗建国', '100米', '1', '12.65', '09:01:23'],
        ['罗建国', '100米', '1', '12.65', '09:01:23'],
        ['罗建国', '100米', '1', '12.65', '09:01:23'],
        ['罗建国', '100米', '1', '12.65', '09:01:23'],
      ];

      this.sexConfig.data = [
        {
          name: '男',
          value: 80
        },
        {
          name: '女',
          value: 40
        }
      ];
      this.ageConfig.data = [
        {
          name: '17岁以下',
          value: 55
        },
        {
          name: '17岁',
          value: 120
        },
        {
          name: '18岁',
          value: 78
        },
        {
          name: '19岁',
          value: 66
        },
        {
          name: '19岁以上',
          value: 80
        }
      ];
      this.tyMaxConfig = {
        number: [2.13],
        content: '{nt}',
        // 数字翻牌器style默认配置
        style: {
          fontSize: 32,
          fill: 'gold'
        },
        toFixed: 2
      }

      this.qqMaxConfig = {
        number: [12.34],
        content: '{nt}',
        // 数字翻牌器style默认配置
        style: {
          fontSize: 32,
          fill: 'gold'
        },
        toFixed: 2
      }

      this.bmMaxConfig = {
        number: [12.97],
        content: '{nt}',
        // 数字翻牌器style默认配置
        style: {
          fontSize: 32,
          fill: 'gold'
        },
        toFixed: 2
      }
      this.isInitData = true;
      this.fullScreen();
    },
    fullScreen() {
      this.isFullScreen = true;

      // prettier-ignore
      let dataAxis = ['大理大学', '云南民族大学', '大理大学', '大理大学', '大理大学', '大理大学', '大理大学', '大理大学', '云南师范大学', '触', '屏', '上', '滑', '动', '能', '够', '自', '动', '缩', '放'];
      let data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220];
      let yMax = 500;
      let dataShadow = [];
      for (let i = 0; i < data.length; i++) {
        dataShadow.push(yMax);
      }

      setTimeout(() => {
        this.dataExcel = echarts.init(document.getElementById('dataExcel'));
        this.dataExcel.setOption({
          padding: 0,
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          xAxis: {
            data: dataAxis,
            axisLabel: {
              inside: true,
              color: '#fff',
              interval: 0, // 强制显示所有标签
              rotate: -90, // 设置旋转角度
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            z: 10
          },
          yAxis: {
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: 'gold'
            }
          },
          series: [
            {
              type: 'bar',
              showBackground: true,
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {offset: 0, color: '#83bff6'},
                  {offset: 0.5, color: '#188df0'},
                  {offset: 1, color: '#188df0'}
                ])
              },
              emphasis: {
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {offset: 0, color: '#2378f7'},
                    {offset: 0.7, color: '#2378f7'},
                    {offset: 1, color: '#83bff6'}
                  ])
                }
              },
              data: data
            }
          ]
        });
      })
    },
    exitFullScreen() {
      this.isFullScreen = false;
    },
    async getChanel() {
      this.channelList = await this.$refs.hVP.getZeroChannel();
      this.channelList.sort(function (item1, item2) {
        return item1.name.localeCompare(item2.name, 'zh-CN');
      })
      if (this.channelList.length != 0) {

      }
      console.log(this.channelList);
      setTimeout(() => {
        this.playLive();
      }, 1000)

    },
    playLive() {
      for (let i = 0; i < this.channelList.length; i++) {
        this.$refs.hVP.startRealPlay(this.channelList[i].id,i);
        console.log(this.channelList[i].id);
      }
    }
  }
}
</script>

<style>

.rotate {
  animation: rotate 20s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.rotate2 {
  animation: rotate2 20s linear infinite;
}

@keyframes rotate2 {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

.back {
  background-image: url('../../../assets/images/lotterybk.jpg')
}

.fullscreen-div {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
}

.dv-scroll-ranking-board {
  --01413bf0: #ffca59 !important;
  --10122c43: #fdf2bd !important;
  --41a52d43: 24px !important;
  --193a1454: rgba(228, 251, 19, 0.5) !important;

}

.ant-steps-item-title {
  color: #ffca59 !important;
  font-size: 24px !important;
  margin-left: 64px;
}

.ant-steps-item-description {
  color: #fdf2bd !important;
  font-size: 22px !important;
  margin-left: 64px;
}

.ant-steps-item-icon {
  border-color: gold !important;
}

.ant-steps-item-process .ant-steps-item-icon {
  background-color: orange !important;
}

.ant-steps-icon {
  color: gold !important;
}

.ant-steps-item-finish .ant-steps-item-tail::after {
  background-color: gold !important;
}
</style>